<template>
    <div class="well">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="row">
                <div class="col-md-12 text-right margin-bottom-10">
                    <btn-add></btn-add>
                </div>
            </div>

            <table class="table table-bordered table-striped table-hover table-condensed">
                <thead>
                    <tr>
                        <th>排序</th>
                        <th>名称</th>
                        <th>标识</th>
                        <th>类型</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>

                    <tr v-for="permission in permissions" v-bind:class="{ danger: !permission.status }">
                        <td>{{ permission.sort }}</td>
                        <td v-html="permission.treeTitle"></td>
                        <td>{{ permission.name }}</td>
                        <td>{{ permission.type ? '菜单' : '权限' }}</td>
                        <td>{{ permission.updated_at }}</td>
                        <td>
                            <btn-addp :pid="permission.id"></btn-addp>
                            <btn-edit :data="permission"></btn-edit>
                            <btn-destroy :id="permission.id"></btn-destroy>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- form modal -->
        <div class="modal" v-bind:id="'modal-' + name" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">{{ method + title }}</h4>
                    </div>
                    <form role="form" @submit.prevent="submit">
                        <div class="modal-body">
                            <!-- pid -->
                            <div class="form-group">
                                <label for="pid-field">所属分类</label>
                                <select v-model="permission.pid" name="pid" id="pid-field" class="form-control">
                                    <option value="0">一级分类</option>
                                    <option v-bind:disabled="permission.id == item.id" v-for="item in permissions" v-bind:value="item.id" v-html="item.treeTitle"></option>
                                </select>

                                <!-- error msg -->
                                <span v-show="errors.has('pid')" class="help-block">{{ errors.first('pid') }}</span>
                            </div>

                            <!-- title -->
                            <div class="form-group" :class="{'has-error': errors.has('title')}">
                                <label for="title-field">名称</label>
                                <input v-model="permission.title" v-validate data-vv-rules="required|max:50" data-vv-as="名称"
                                       type="text" value="" class="form-control" id="title-field" name="title" placeholder="请输入名称">

                                <!-- error msg -->
                                <span v-show="errors.has('title')" class="help-block">{{ errors.first('title') }}</span>
                            </div>

                            <!-- name -->
                            <div class="form-group" :class="{'has-error': errors.has('name')}">
                                <label for="name-field">标识</label>
                                <input v-model="permission.name" v-validate data-vv-rules="required|max:50" data-vv-as="标识"
                                       type="text" class="form-control" id="name-field" name="name" placeholder="请输入标识">

                                <!-- error msg -->
                                <span v-show="errors.has('name')" class="help-block">{{ errors.first('name') }}</span>
                            </div>

                            <!-- sort -->
                            <div class="form-group" :class="{'has-error': errors.has('sort')}">
                                <label for="sort-field">排序</label>
                                <input v-model="permission.sort" v-validate data-vv-rules="required|numeric" data-vv-as="排序"
                                       type="text" class="form-control" id="sort-field" name="sort" placeholder="请输入排序">

                                <!-- error msg -->
                                <span v-show="errors.has('sort')" class="help-block">{{ errors.first('sort') }}</span>
                            </div>

                            <!-- icon -->
                            <div class="form-group" :class="{'has-error': errors.has('icon')}">
                                <label for="icon-field">icon</label>
                                <input v-model="permission.icon" v-validate data-vv-rules="max:50" data-vv-as="icon"
                                       type="text" class="form-control" id="icon-field" name="icon">

                                <!-- error msg -->
                                <span v-show="errors.has('icon')" class="help-block">{{ errors.first('icon') }}</span>
                            </div>

                            <!-- type -->
                            <div class="form-group">
                                <label>类型</label>
                                <div class="radio no-margin">
                                    <label class="no-padding">
                                        <input v-model="permission.type" name="type" value="1" type="radio">
                                        <span class="text">菜单 </span>
                                    </label>
                                    <label>
                                        <input v-model="permission.type" name="type" value="0" type="radio">
                                        <span class="text">权限 </span>
                                    </label>
                                </div>
                            </div>

                            <!-- status -->
                            <div class="form-group">
                                <label>状态</label>
                                <div class="radio">
                                    <label class="no-padding">
                                        <input v-model="permission.status" name="status" value="1" type="radio">
                                        <span class="text">启用 </span>
                                    </label>
                                    <label>
                                        <input v-model="permission.status" name="status" value="0" type="radio" class="colored-danger">
                                        <span class="text">禁用 </span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>
                    </form>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            this.refresh();

            // form modal隐藏事件
            this.modal.on('hidden.bs.modal', response => {
                this.errors.clear();
            });
        },
        data(){
            return {
                name: this.$route.name,
                title: '权限',
                permission: {},
                permissions: [],
            }
        },
        methods: {
            /**
             * 添加
             *
             * @param integer pid 所属分类ID 默认0
             */
            add(pid = 0){
                this.permission = {
                    pid,
                    title: '',
                    name: '',
                    sort: 200,
                    icon: '',
                    type: 1,
                    status: 1,
                };
                this.showForm();
            },

            /**
             * 编辑
             *
             * @param object permission
             */
            edit(permission){
                this.get(this.name + '/' + permission.id + '/edit').then(response => {
                    this.permission = response;
                    this.showForm();
                });
            },

            /**
             * 删除
             *
             * @param integer id 主键ID
             */
            destroy(id){
                this.confirm(() =>{
                    this.delete(this.name + '/' + id).then(response => {
                        this.refresh();
                        this.alert(this.title + '删除成功！');
                    });
                });
            },

            /**
             * 提交表单
             */
            submit(){
                this.$validator.validateAll().then(result => {
                    if(result){
                        this.ajax({
                            url: this.name + (this.permission.id ? '/' + this.permission.id : ''),
                            type: this.permission.id ? 'PATCH' : 'POST',
                            data: this.permission,
                        }).then(response => {
                            this.alert(this.title + this.method + '成功！');
                            this.modal.modal('hide');
                            this.refresh();
                        });
                    }
                });
            },

            /**
             * 更新数据
             */
            refresh(){
                this.get(this.name).then(response => {
                    this.permissions = this.treeLists(response);
                });
            },

            /**
             * 显示表单模态框
             */
            showForm(){
                this.modal.modal('show');
            },
        },
        computed: {
            /**
             * 表单模态框
             *
             * @returns {*|jQuery|HTMLElement}
             */
            modal: function(){
                return $("#modal-" + this.name);
            },

            /**
             * 操作类型
             * @returns {string}
             */
            method: function(){
                return this.permission.id ? '编辑' : '创建';
            },
        },
    }
</script>
